<template>
  <view class="work-record" @click.stop="">
    <view class="line"><text></text></view>
    <view class="header">
      <view class="content_title">{{
        isEdit ? "修改问题记录" : "添加问题记录"
      }}</view>
      <view class="add" @click="handleQuote" v-if="list.length && !isEdit">
        <image src="/static/images/maintain/add.png" mode="" />
        引用上一条记录内容
      </view>
    </view>

    <view class="content">
      <view class="content_item">
        <view class="name">
          <view>电梯部件</view>
          <text>*</text>
        </view>
        <view>
          <view class="item_partsModel">
            <view class="partsNumber_select" @click="selectPartsClick(index)">
              <view class="innerText" :style="partNames ? 'color:#333' : ''">
                {{ partNames || "请选择配件" }}
                <text
                  style="color: #333"
                  v-if="partNames && obj.floorStandNames"
                  >({{ obj.floorStandNames.replaceAll(",", ">") }})</text
                >
              </view>
              <view class="downs"><text></text></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 备注 -->
      <view class="notice">
        <view class="name">
          <view>问题描述</view>
          <text>*</text>
        </view>
        <view class="area">
          <textarea
            :value="obj.disposeDesc"
            placeholder="请输入问题描述"
            placeholder-class="textare"
            :maxlength="300"
            :auto-height="true"
            :always-embed="true"
            @input="descConfirm"
          />
          <view class="length">{{ obj.disposeDesc.length + "/300" }}</view>
        </view>
      </view>

      <view class="imgBox">
        <view class="name"
          >照片/视频
          <text>*</text>
        </view>
        <image-drag-sort
          :max="9"
          @changeList="changeImg"
          :list="obj.disposeImgUrl"
        >
        </image-drag-sort>
      </view>
      <view class="content_item">
        <view class="name">
          <view>问题分类</view>
          <text>*</text>
        </view>
        <view class="falutBox">
          <view class="falutBoxContent">
            <view
              class="falutBoxContent_item"
              v-for="item in faultReasonClassified"
              :key="item.id"
            >
              <view
                :class="[
                  'falutBox_item',
                  item.dictKey == obj.faultReasonClassifiedKey ? 'active' : '',
                ]"
                @click="handleChoose(item, 2)"
                >{{ item.dictValue }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="content_item">
        <view class="name">
          <view>问题原因</view>
          <text>*</text>
        </view>
        <!-- <reason-card :list="faultReason"></reason-card> -->
        <view class="falutBox">
          <view class="falutBoxContent">
            <!-- <view class="falutBoxContent_item" v-for="item in faultReason" :key="item.id">
							<view :class="[
								'falutBox_item',
								item.dictKey == obj.faultReasonKey ? 'active' : '',
							]" @click="handleChoose(item, 1)">{{ item.dictValue }}</view>
						</view> -->
            <view class="falutBoxContent_item">
              <view
                :class="['falutBox_item', obj.faultReasonWhoKey.length?'active':'' ,'reasonItem']"
                @click="editReason"
                >选择原因 
				<uni-icons :color="obj.faultReasonWhoKey.length?'#0091ff':'#ccc'" size="16" type="arrowright" />
				</view
              >
            </view>
          </view>
          <ReasonTreeDialog
            :treeData="falutTreeList"
            :defaultProps="{ id: 'id', label: 'name', children: 'childList' }"
            :multiSelect="true"
            ref="ReasonTreeDialog"
            @confirm="onConfirmReason"
            @clear="onClearReason"
            @close="closeReasonDialog"
          />
          <view v-if="obj.faultReasonKey.length" class="chooseReason">
              已选原因:{{obj.wxFaultCauseNames.join('、') }}
              <text class="clear" @click="clearReason">清空</text>
            </view>
          <view v-if="obj.wxFaultCauseNames.includes('其他')" class="customer">
            <input
              type="text"
              placeholder="请输入其他问题原因"
              v-model="customFaultReason"
              maxlength="10"
            />
          </view>
        </view>
      </view>
      <view class="content_item">
        <view class="name">
          <view>问题责任</view>
          <text>*</text>
        </view>
        <view class="falutBox">
          <view class="falutBoxContent">
            <view
              class="falutBoxContent_item"
              v-for="item in faultReasonWho"
              :key="item.id"
            >
              <view
                :class="[
                  'falutBox_item',
                  obj.faultReasonWhoKey.includes(item.id) ? 'active' : '',
                ]"
                @click="chooseType(item)"
                >{{ item.name }}</view
              >
            </view>
          </view>
          <view v-if="obj.faultReasonWhoKey.includes(this.typeOtherId)" class="customer">
            <input
              type="text"
              placeholder="请输入其他问题责任"
              v-model="customfaultWho"
              maxlength="10"
            />
          </view>
        </view>
      </view>
      <view class="content_item">
        <view class="name">
          <view>紧急程度</view>
          <text>*</text>
        </view>
        <view class="falutBox">
          <view class="falutBoxContent">
            <view
              class="falutBoxContent_item"
              v-for="item in emerProList"
              :key="item.key"
            >
              <view
                :class="[
                  'falutBox_item',
                  obj.emerProcType == item.key ? 'active' : '',
                ]"
                @click="obj.emerProcType = item.key"
                >{{ item.name }}</view
              >
            </view>
          </view>
        </view>
      </view>
      <view class="save" @click="handleSave"> 提交</view>
    </view>
    <!-- 配件选择组件 -->
  </view>
</template>

<script>
import ImageDragSort from '@/components/image-drag-sort/img-and-video.vue';
// import dropdown from '@/components/dropdown/dropdown.vue';
import { mapState } from 'vuex';
import { editCHeckRecord } from '@/apis/workOrder.js';
import ReasonTreeDialog from '../../components/ReasonTreeDialog/index.vue';

import {
	getCheckReason,
	addOrUpdateRecord,
	getCheckNoPass,
	checkFinish,
} from '@/apis/affair.js';
export default {
	props: {
		planId: {
			type: String,
		},
		restFlag: {
			type: String,
		},
		msg: {
			type: Object,
		},
		index: {
			type: Number,
		},
		detailId: {
			type: [String, Number],
		},
		list: {
			type: Array,
		},
		checkStatus: {
			type: [String, Number],
			default: -1,
		},
		elevatorId: {
			type: String,
		},
	},
	components: {
		ImageDragSort,
		ReasonTreeDialog,
	},

	data() {
		return {
			obj: {
				partIds: '',
				partNames: '',
				disposeImgUrl: [],
				disposeDesc: '',
				faultReasonKey: [],
				faultReasonName: '',
				faultReasonWhoKey: [],
				faultReasonWhoName: '',
				faultReasonClassifiedKey: '',
				faultReasonClassifiedName: '',
				emerProcType: '',
				// 维修原因
				wxFaultCauseNames:[], 
			},
			refresh: 0,
			isEdit: false,
			updateStatus: false,
			faultReason: [],
			// 问题分类
			faultReasonClassified: [],
			faultReasonWho: [],
			customFaultReason: '',
			customfaultWho: '',
			customfaultClassifie: '',
			emerProList: [
				{ name: '非常紧急', key: 1 },
				{ name: '紧急', key: 2 },
				{ name: '普通', key: 3 },
				{ name: '较低', key: 4 },
			],
			partIndex: '',
			partNames: '',
			rest: 0,
			partsNameother: '',
			falutTreeList:[],
			// 责任选中的值
			typeSelectIds:[],
			// 责任选中的名字
			typeSelectNames:[],
			// 获取责任的其他id
			typeOtherId:''
			
		};
	},

	mounted() {
		// 获取问题分类问题责任
		this.getCheckReason();
	
		// #ifdef H5
		setTimeout(() => {
			uni.$on('part-selectd', (res) => {
				this.partsSubmit(res);
			});
		}, 1000);
		// #endif

		// #ifndef H5
		uni.$on('part-selectd', (res) => {
			this.partsSubmit(res);
		});
		// #endif
	},
	onUnload() {},
	beforeDestroy() {
		uni.$off('part-selectd');
	},
	computed: {
		...mapState('user', ['userinfo']),
	},
	methods: {
		closeReasonDialog() {

		},
		clearReason() {
			console.log('清除');
			this.obj.faultReasonKey = [];
			this.obj.wxFaultCauseNames = [];
			this.$refs.ReasonTreeDialog.$refs.faultTree.clear();
			this.obj.faultReasonWhoKey = [];
			// this.typeSelectNames = [];
		},
		onConfirmReason(res) {
			// 确认逻辑
			const allWxFaultTypeIds = res.nodes
				.flatMap(node => (node.wxFaultTypeList || []))
				.map(item =>String(item.id));
				// 去重
			const uniqueIds = [...new Set(allWxFaultTypeIds)];
			console.log(uniqueIds,'责任选中的id');
			this.obj.faultReasonKey = res.ids;
			this.obj.wxFaultCauseNames = res.names;
			this.$refs.ReasonTreeDialog.$refs.reasonPopup.close();
			this.$refs.ReasonTreeDialog.$refs.faultTree.clear();
			// 回显责任id
			this.obj.faultReasonWhoKey = [];
			// this.typeSelectNames = [];
			this.obj.faultReasonWhoKey = uniqueIds;
			// this.typeSelectNames = this.faultReasonWho
			// 	.filter(item => this.typeSelectIds.includes(item.id))
			// 	.map(item => item.name);
		},
		editReason() {
		//    console.log(  this.$refs.ReasonTreeDialog,'点击编辑');
		   this.$refs.ReasonTreeDialog.$refs.faultTree.clear();
			this.$refs.ReasonTreeDialog.$refs.reasonPopup.open();
			this.$nextTick(()=>{
				this.$refs.ReasonTreeDialog.$refs.faultTree.init(this.obj.faultReasonKey);
			});
		},
		chooseType(item) {
			const idx = this.obj.faultReasonWhoKey.indexOf(item.id);
			if (idx > -1) {
				// 已存在，移除
				this.obj.faultReasonWhoKey.splice(idx, 1);
			} else {
				// 不存在，添加
				this.obj.faultReasonWhoKey.push(item.id);
			}
			this.typeSelectNames = this.faultReasonWho
				.filter(item => this.obj.faultReasonWhoKey.includes(item.id))
				.map(item => item.name);
		},
	
		// 引用上一条记录
		handleQuote() {
			getCheckNoPass({ planId: this.planId, groupId: 0 }).then((res) => {
				console.log(res.data);
				if (res.data.length) {
					if (this.isEdit) {
						// 如果是编辑
						this.obj = res.data[res.data.length - 1];
					} else {
						this.obj = res.data[res.data.length - 1];
						delete this.obj.id;
					}

					this.partNames = this.obj.partNames.split('&amp;&amp;').join('>');
					console.log(this.obj,'引用');
				
					//  原因
					if (this.obj.wxFaultCauseNames.includes('其他')) {
						this.customFaultReason = this.obj.faultReasonName;
					}
					// 责任
					if (this.obj.wxFaultTypeNames.includes('其他')) {
						this.customfaultWho = this.obj.faultReasonWhoName;
					}
					if (!Array.isArray(this.obj.faultReasonKey)) {
						// 字符串转为数组
						this.obj.faultReasonKey = this.obj.faultReasonKey.split(',');
					}
					if (!Array.isArray(this.obj.faultReasonWhoKey)) {
						// 字符串转为数组
						this.obj.faultReasonWhoKey = this.obj.faultReasonWhoKey.split(',');
					}
				}
			});
		},
		handleChoose(item, val) {
			// key 1=>问题原因 2=>问题责任 3=>问题分类
			const map = {
				1: {
					key: 'faultReasonKey',
					name: 'faultReasonName',
					custom: 'customFaultReason',
				},
				2: {
					key: 'faultReasonClassifiedKey',
					name: 'faultReasonClassifiedName',
					custom: 'customfaultClassifie',
				},
				3: {
					key: 'faultReasonWhoKey',
					name: 'faultReasonWhoName',
					custom: 'customfaultWho',
				},
			};
			const dictKey = map[val].key;
			const dictValue = map[val].name;
			this.obj[dictKey] = item.dictKey;
			this.obj[dictValue] = item.dictValue;
			console.log(this.obj);
		},
		// 获取问题数据
		getCheckReason() {
			getCheckReason().then((res) => {
				console.log(res.data, '错误信息');
				// 问题责任
				this.faultReasonWho = res.data.wxFaultTypeVOS.map(item=>{
					return {
						id:String(item.id),
						...item
					};
				});
				// 找到责任数组的其他id
				// this.typeOtherId = '';
				this.typeOtherId = this.faultReasonWho.find(item => item.name === '其他')?.id || '';
				// 问题原因树形结构
				this.faultReason = res.data.treeList;
				// 问题分类
				this.faultReasonClassified = res.data.faultReasonClassified;
				res.data.treeList.forEach((item) => {
					if (!item.childList || item.childList.length === 0) {
						item.type = 2;
					} else {
						item.type = 1;
						item.childList.forEach((childItem) => {
							childItem.type = 2;
						});
					}
				});
				this.falutTreeList = res.data.treeList;
			});
		},
		// showDropDown(res) {
		//   this.$refs.repairFitting.close();
		// },

		selectPartsClick(index) {
			this.partIndex = index;
			uni.navigateTo({
				url: '/pages/pubilc/partSelect?elevatorId=' + this.elevatorId,
				fail: (fail) => {
					console.log(fail);
				},
			});
		},

		// 配件搜索选择确定
		partsSubmit(res) {
			let names = res.names;
			let ids = res.ids;
			this.obj.floorStandIds = '';
			this.obj.floorStandNames = '';
			if (res.flag && res.flag.id) {
				this.obj.floorStandIds = res.flag.ids.join(',');
				this.obj.floorStandNames = res.flag.names.join(',');
			}
			this.obj.partIds = ids.join(',');
			this.obj.other = res.other || '';
			this.obj.partNames = names.join('&&');
			this.partNames = names.join('>');
		},
		changeImg(val) {
			console.log(val, 'val的值');
			this.obj.disposeImgUrl = val;
		},
		descConfirm(e) {
			// console.log(e.detail.value);
			if (e.detail.value.length >= 300) {
				this.obj.disposeDesc = e.detail.value.substring(0, 300);
			} else {
				this.obj.disposeDesc = e.detail.value;
			}
		},
		// 初始化
		initRecord(data) {
			// console.log(data, 'data的值');
			let res = JSON.parse(JSON.stringify(data));
			console.log(res,'res的值');
			// 如果是编辑记录
			this.isEdit = res.isEdit;
			if (res.isEdit) {
				// 如果是修改
				this.partNames = res.partNames.split('&amp;&amp;').join('>');
				this.obj = res;
				// 转化为数组
				this.obj.faultReasonKey = res.faultReasonKey.split(',');
				this.obj.faultReasonWhoKey = res.faultReasonWhoKey.split(',');
				this.obj.wxFaultCauseNames = res.wxFaultCauseNames || [];
				if (res.wxFaultCauseNames.includes('其他')) {
					this.customFaultReason = res.faultReasonName;
				}
				if (res.floorStandNames) {
					this.obj.floorStandNames = res.floorStandNames.split(',');
				}
				// if (this.obj.faultReasonKey == 6) {
				// 	this.customFaultReason = this.obj.faultReasonName;
				// }
				if (this.obj.faultReasonWhoKey.includes(this.typeOtherId)) {
					this.customfaultWho = this.obj.faultReasonWhoName;
				}
			} else {
				// 如果是新增
				this.obj.disposeDesc = '';
				this.obj.disposeImgUrl = [];
			}
		},
		// 保存
		async handleSave() {
			console.log(this.obj);
			// return;
			//   uni.showLoading({
			//     title: "请稍后",
			//     mask: true,
			//   });
			//   await this.getDetail();
			//   uni.hideLoading();
			//   if (this.planOrderStatus === 4 && !this.updateStatus) {
			//     console.log("完成");
			//     this.$emit("hadDone");
			//   } else {

			//   }
			const {
				partIds,
				disposeImgUrl,
				disposeDesc,
				emerProcType,
				faultReasonKey,
				faultReasonWhoKey,
				faultReasonClassifiedKey,
				faultReasonName,
				wxFaultCauseNames,
				wxFaultTypeNames
			} = this.obj;

			if (
				!partIds ||
        !disposeImgUrl.length ||
        !disposeDesc ||
        !emerProcType ||
        !faultReasonKey.length ||
        !faultReasonWhoKey.length ||
        !faultReasonClassifiedKey
			) {
				let str = '';
				if (!partIds) {
					str = '请选择电梯部件';
				}
				if (!disposeImgUrl.length) {
					str = '请上传图片/视频';
				}
				if (!disposeDesc) {
					str = '请输入问题描述';
				}
				if (!emerProcType) {
					str = '请选择紧急程度';
				}
				if (!faultReasonKey.length) {
					str = '请选择问题原因';
				}
				if (!faultReasonClassifiedKey) {
					str = '请选择问题分类';
				}
				if (!faultReasonWhoKey.length) {
					str = '请选择问题责任';
				}
				uni.showToast({
					title: str,
					icon: 'none',
				});
				return false;
			} else {
				if (
					(faultReasonWhoKey.includes(this.typeOtherId) && !this.customfaultWho) ||
          (wxFaultCauseNames.includes('其他') && !this.customFaultReason)
				) {
					let str = '';
					if (!this.customfaultWho) {
						str = '请输入问题负责自定义';
					}
					if (!this.customFaultReason) {
						str = '请输入问题原因自定义';
					}
					uni.showToast({
						title: str,
						icon: 'none',
					});
					return;
				}
				uni.showLoading({
					title: '提交',
					mask: true,
				});

				let obj = JSON.parse(JSON.stringify(this.obj));

				if (obj.faultReasonWhoKey.includes(this.typeOtherId)) {
					obj.faultReasonWhoName = this.customfaultWho;
				}
				if (obj.wxFaultCauseNames.includes('其他')) {
					obj.faultReasonName = this.customFaultReason;
				}
				obj.faultReasonKey = obj.faultReasonKey.join(',');
				obj.faultReasonWhoKey = obj.faultReasonWhoKey.join(',');
			
				delete obj.wxFaultCauseNames;
				uni.hideLoading();
				/* 定位上报埋点*/
				this.reportAddress({
					userId: this.userinfo.user_id,
					operation: 5,
					planId: this.planId,
					recordType: 1,
				});
				/* 定位上报埋点 end*/
				// 如果是修改
				if (this.isEdit) {
					// console.log("修改");
					addOrUpdateRecord({
						planId: this.planId,
						userId: this.userinfo.user_id,
						...obj,
					}).then((res) => {
						this.addMsg(res.data);
						checkFinish({
							status: 0,
							checkStatus: this.checkStatus,
							id: this.detailId,
						}).then(() => {});
					});
				} else {
					addOrUpdateRecord({
						...obj,
						planId: this.planId,
						userId: this.userinfo.user_id,
					}).then((res) => {
						this.addMsg(res.data);
						checkFinish({
							status: 0,
							checkStatus: this.checkStatus,
							id: this.detailId,
						}).then(() => {});
					});
				}
				// update({
				//   ...obj,
				//   planId: this.planId,
				//   userId: this.userinfo.user_id,
				// }).then((res) => {
				//   // console.log(res);
				//   this.addMsg(res.data);
				// });
			}
		},
		addMsg(checkHistoryId) {
			uni.showLoading({
				title: '保存中',
				mask: true,
			});
			const params = {
				planId: this.planId,
				userId: this.userinfo.user_id,
				recordLog: this.isEdit ? '更新了记录' : '创建了记录',
				recordDataValue: this.obj,
				checkHistoryId: checkHistoryId,
			};
			editCHeckRecord(params).then((res) => {
				console.log(res);

				uni.hideLoading();
				this.obj = {
					partIds: '',
					partNames: '',
					disposeImgUrl: [],
					disposeDesc: '',
					faultReasonKey: [], // 问题原因
					faultReasonName: '',// 问题原因的名字
					faultReasonWhoKey: [],
					faultReasonWhoName: '',// 责任的名字
					faultReasonClassifiedKey: '',
					faultReasonClassifiedName: '',
					emerProcType: '',
				};
				uni.showToast({
					title: `${this.isEdit ? '新增成功' : '修改成功'}`,
					icon: 'none',
				});
				// 重新请求
				console.log('重新请求');
				this.$emit('update', this.index);
			});
		},
		handleDes(res, olddata) {
			return new Promise((resolve) => {
				let result = '';
				let imgUrl = this.disposeImgUrl || [];
				let oimgUrl = [];
				for (let i = 0; i < olddata.disposeImgUrl.length; i++) {
					olddata.disposeImgUrl[i];
					oimgUrl.push(olddata.disposeImgUrl[i].url);
				}
				let recordHistory = res.disposeDesc || '';
				let orecordHistory = olddata.disposeDesc || '';
				if (JSON.stringify(imgUrl) != JSON.stringify(oimgUrl)) {
					if (imgUrl.length == oimgUrl.length) {
						result = result + '更新了照片';
					} else {
						if (imgUrl.length > oimgUrl.length) {
							result =
                result + '上传了' + (imgUrl.length - oimgUrl.length) + '张图片';
						} else {
							result =
                result + '删除了' + (oimgUrl.length - imgUrl.length) + '张图片';
						}
					}
				}
				if (recordHistory != orecordHistory) {
					result = result + (result.length > 0 ? '，' : '');
					result = result + (orecordHistory ? '更新了描述' : '添加了描述');
				}
				if (!result) {
					resolve();
				}

				const params = {
					planId: this.planId,
					userId: this.userinfo.user_id,
					checkHistoryId: this.form.id,
					recordLog: result,
					recordDataValue: this.form,
				};
				console.log('params', params);
				editCHeckRecord(params).then((res) => {
					resolve(res);
				});
			});
		},
	},
};
</script>
<style></style>
<style lang="scss" scoped>
.work-record {
  // height: 1000rpx;
  // overflow: auto;
  background-color: #fff;
  padding: 20rpx 40rpx 32rpx 40rpx;
  border-radius: 8rpx 8rpx 0rpx 0rpx;
  box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);

  .line {
    margin-bottom: 18rpx;
    display: flex;
    justify-content: center;

    text {
      width: 64rpx;
      height: 10rpx;
      background: #d8d8d8;
      border-radius: 6rpx;
    }
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28rpx;

    .content_title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }

    .add {
      color: #0091ff;
      font-size: 28rpx;
      display: flex;
      align-items: center;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 4rpx;
      }
    }
  }

  .item_partsModel {
    margin: 20rpx 0;

    .title {
      font-size: 28rpx;
      color: #666666;
      margin: 20rpx 0;
    }

    .partsNumber_select {
      display: flex;
      flex-direction: row;
      margin-bottom: 32rpx;
      padding: 10rpx 20rpx;
      border: 2rpx solid #e9e9e9;
      border-radius: 8rpx;

      .innerText {
        font-size: 28rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        align-items: center;
        color: #cccccc;
        line-height: 40rpx;
        width: 80%;
      }

      .downs {
        width: 40rpx;
        margin-left: auto;

        text {
          display: inline-block;
          width: 16rpx;
          height: 16rpx;
          border-bottom: 2rpx #ccc solid;
          border-left: 2rpx #ccc solid;
          transform: rotate(-45deg);
        }
      }
    }

    .partsNumber_input {
      width: 100%;
      border: 2rpx solid #e9e9e9;
      // border-radius: 8rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      border-right: 0px;
      border-radius: 8rpx 0rpx 8rpx 8rpx;
    }

    .falutItem {
      border: 2rpx solid #cccccc;
      border-radius: 8rpx;
      color: #666;
      font-size: 26rpx;
      width: 216rpx;
      height: 48rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .active {
      color: #0091ff;
      border-color: #0091ff;
    }

    .other {
      width: 670rpx;
      height: 72rpx;
      border: 2rpx solid #e9e9e9;
      border-radius: 4rpx;
      padding-left: 28rpx;
      box-sizing: border-box;
    }
  }

  .content {
    height: 1000rpx;
    overflow: auto;
    padding-bottom: 70rpx;
    // background: pink;

    .content_item {
      margin-bottom: 16rpx;

      .name {
        font-size: 26rpx;
        // margin-bottom: 16rpx;
        color: #333;

        text {
          color: #e54b4b;
        }
      }
    }

    .falutBox {
      .falutBoxContent {
        display: flex;
        flex-wrap: wrap;

        .falutBoxContent_item {
          display: flex;
          width: 33.3%;
        }

        .falutBoxContent_item:nth-child(3n + 2) {
          justify-content: center;
        }

        .falutBoxContent_item:nth-child(3n) {
          justify-content: flex-end;
        }
      }

      .falutBox_item {
        font-size: 28rpx;
        height: 48rpx;
        width: 216rpx;
        box-sizing: border-box;
        border: 2rpx solid #cccccc;
        border-radius: 8rpx;
        color: #666;
        text-align: center;
        margin-bottom: 20rpx;
		overflow: hidden;
         white-space: nowrap;
       text-overflow: ellipsis;
	   line-height: 45rpx
      }
	  .reasonItem{
		margin-bottom: 20rpx;
	  }

      .customer {
        height: 48rpx;
        border: 1rpx solid #ccc;
        box-sizing: border-box;

        input {
          font-size: 28rpx;
          padding: 0 20rpx;
          height: 100%;
        }
      }

      .active {
        color: #0091ff;
        border-color: #0091ff;
      }
    }

    .imgBox {
      padding-bottom: 32rpx;

      // border-bottom: 2rpx solid #e9e9e9;
      .name {
        margin-bottom: 16rpx;
        font-size: 26rpx;
        color: #333;

        text {
          color: #e54b4b;
        }
      }
    }

    .notice,
    .content_item {
      width: 100%;

      text {
        color: #e54b4b;
      }

      .name {
        display: flex;
        font-size: 26rpx;
        color: #333;
        margin-bottom: 16rpx;
        font-weight: 600;
      }

      .area {
        padding: 20rpx;
        border: 2rpx solid #e9e9e9;

        textarea {
          font-size: 28rpx;
          height: 150rpx;
          width: 100%;
        }
      }
    }

    .notice {
      padding-bottom: 16rpx;
    }

    textarea {
      font-size: 28rpx;
    }

    .length {
      text-align: right;
      // padding-bottom: 20rpx;
      color: #ccc;
    }
  }

  .save {
    display: flex;
    justify-content: center;
    z-index: 20;
    position: fixed;
    bottom: 0;
    margin-bottom: 28rpx;
    width: 670rpx;
    height: 70rpx;
    background: #0091ff;
    color: #fff;
    align-items: center;
    border-radius: 8rpx;
  }
}
.chooseReason{
  color: #333;
  margin: -14rpx 0 10rpx 0;
  .clear{
  margin-left: 16rpx;
  color: #0091FF !important;
}
}
</style>
